<template>
  <div v-if="cdata">
    <v-chart
      :force-fit="true"
      :height="height"
      :data="data"
      :scale="scale"
      padding="auto"
    >
      <v-tooltip />
      <v-axis />
      <v-legend />
      <v-line position="month*temperature" color="city" />
      <v-point
        position="month*temperature"
        color="city"
        :size="4"
        :v-style="style"
        :shape="'circle'"
      />
    </v-chart>
  </div>
</template>

<script>
const DataSet = require("@antv/data-set");

export default {
  props: {
    cdata: {
      type: Object,
      default() {
        return null;
      }
    }
  },
  watch: {
    cdata: {
      immediate: true,
      deep: true,
      handler(cdata) {
        if (!cdata || !cdata[10001]) return;
        const sourceData = [
          {
            month: "1月",
            "14岁以下": cdata[10003][0].value,
            "14-28岁": cdata[10004][0].value,
            "28-42岁": cdata[10005][0].value,
            "42-56岁": cdata[10006][0].value,
            "56岁以上": cdata[10007][0].value
          },
          {
            month: "2月",
            "14岁以下": cdata[10003][1].value,
            "14-28岁": cdata[10004][1].value,
            "28-42岁": cdata[10005][1].value,
            "42-56岁": cdata[10006][1].value,
            "56岁以上": cdata[10007][1].value
          },
          {
            month: "3月",
            "14岁以下": cdata[10003][2].value,
            "14-28岁": cdata[10004][2].value,
            "28-42岁": cdata[10005][2].value,
            "42-56岁": cdata[10006][2].value,
            "56岁以上": cdata[10007][2].value
          },
          {
            month: "4月",
            "14岁以下": cdata[10003][3].value,
            "14-28岁": cdata[10004][3].value,
            "28-42岁": cdata[10005][3].value,
            "42-56岁": cdata[10006][3].value,
            "56岁以上": cdata[10007][3].value
          },
          {
            month: "5月",
            "14岁以下": cdata[10003][4].value,
            "14-28岁": cdata[10004][4].value,
            "28-42岁": cdata[10005][4].value,
            "42-56岁": cdata[10006][4].value,
            "56岁以上": cdata[10007][4].value
          },
          {
            month: "6月",
            "14岁以下": cdata[10003][5].value,
            "14-28岁": cdata[10004][5].value,
            "28-42岁": cdata[10005][5].value,
            "42-56岁": cdata[10006][5].value,
            "56岁以上": cdata[10007][5].value
          }
        ];

        const dv = new DataSet.View().source(sourceData);
        dv.transform({
          type: "fold",
          fields: ["14岁以下", "14-28岁", "28-42岁", "42-56岁", "56岁以上"],
          key: "city",
          value: "temperature"
        });
        const data = dv.rows;

        const scale = [
          {
            dataKey: "month",
            min: 0,
            max: 1
          }
        ];

        this.data = data;
        this.scale = scale;
      }
    }
  },
  data() {
    return {
      data: [],
      scale: [],
      height: (window.innerWidth / 1920) * 300,
      style: { stroke: "#fff", lineWidth: 1 }
    };
  }
};
</script>
